<template>
    <div class="login-container">
        <div class="login-cener-container">
            <!--左侧logo-->
            <div class="login-left-container">
                <div class="login-left-bg">
                    <div>
                        <!-- <div class="login-left-logo-title">
                            <img :src="logo" alt="" />
                            <span>{{ title }}</span>
                        </div> -->
                        <div class="login-left-image">
                            <img src="@/assets/images/login-box-bg.svg" alt="" />
                            <div class="login-welcome">
                                <span>{{ t("欢迎使用本系统") }}</span>
                                <span>{{ title }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--右侧form-->
            <div class="login-right-container">
                <div style="width: 100%;height: 100%;">
                    <!-- <div style="display: flex;justify-content: right;">
                        <el-switch v-model="isDark" inline-prompt active-text="黑暗模式" inactive-text="白天模式"
                            @change="handleChangeDark" />
                    </div> -->
                    <LoginForm></LoginForm>
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
$window-height: 100vh;
$window-width: 100vw;

.login-container {
    width: $window-width;
    height: $window-height;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(/src/assets/images/login-bg.svg);

    .login-cener-container {
        width: 60%;
        height: 80%;
        display: flex;
        align-items: center;
        border-radius: 0px;
        // border: 0px solid rgba(107, 114, 128, 0.2);
    }

    .login-left-container {
        width: 50%;
        height: 100%;
        // border-radius: 20px 0 0 20px;
        display: flex;
        align-items: center;
        justify-content: center;

        .login-left-bg {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
                width: 350px;
            }

        }

        .login-left-image {
            height: calc(100% - 120px);
        }

        .login-welcome {
            font-weight: 700;
            font-size: 36px;
            font-family: 'Microsoft YaHei';
            color: #fff;
            display: grid;

            span:first-child {
                font-size: 30px;
            }

            span:last-child {
                font-size: 20px;
            }
        }

        .login-left-logo-title {
            display: flex;
            justify-content: center;

            img {
                margin: 10px;
                width: 100px;
                height: 100px;
            }

            span {
                display: flex;
                flex-wrap: nowrap;
                align-items: center;
                font-weight: 700;
                font-size: 36px;
                font-family: 'Microsoft YaHei';
                color: #fff;
            }
        }
    }

    .login-right-container {
        width: 50%;
        height: 100%;
        display: flex;
        align-items: center;
        // border-radius: 0 20px 20px 0;
    }
}
</style>
<script type="ts" setup>
import { ref } from 'vue'
import { Sysinfo } from '@/common/config'
import { t } from '@/common/locale'
import LoginForm from '@/components/login/LoginForm.vue'
import { changeTheme } from '@/common/theme'
import { useAppSettings } from '@/stores'

const settingStore = useAppSettings()
const title = ref(Sysinfo.Title)
const logo = ref(Sysinfo.Logo)
const isDark = ref(settingStore.getThemeColor() !== '')

const handleChangeDark = (val) => {
    if (val) {
        changeTheme('dark')
    } else {
        changeTheme('')
    }
}
</script>